{extend name="base" /}

{block name="content"}
<form class="layui-form" action="" id="searchBox">
    <div class="layui-inline" style="width: 256px;">
        <a href="javascript:;" value="{$today}" class="layui-btn layui-btn-primary" id="today" style="float: left; border: 1px solid #d2d2d2; margin-right: 4px; background: #fff;">今天</a>
        <input type="text" style="width:186px; float:left;" name="date" value="{$date}" id="date" lay-verify="datetime" placeholder="支付时间" autocomplete="off" class="layui-input layui-disabled">
    </div>
    <div class="layui-inline">
        <select name="plat" id="plat" lay-filter="plat">
            <option value="cps" {$cps_selected}>CPS</option>
            <option value="sdk" {$sdk_selected}>联运</option>
        </select>
    </div>
    <div class="layui-inline">
        <div class="layui-input-inline">
            <select name="channel_id" id="channel_id" lay-filter="channel_id" lay-search="">
                <option value="">选择渠道（全部）</option>
                {volist name="$channel_data" id="vo"}
                <option value="{$vo.cps_id}">{$vo.cps_id}：{$vo.cps_name}</option>
                {/volist}
            </select>
        </div>
    </div>
    <div class="layui-inline">
        <button class="layui-btn searchBtn my-btn" lay-filter="demo1" lay-submit="">搜索</button>
    </div>
</form>
<div id="toolBox">
    <div class="layui-inline mt5">
        <div class="my-data" style="background: #f60;">游戏新增：<span id="game_add">0.00</span></div>
    </div>
    <div class="layui-inline mt5">
        <div class="my-data" style="background: #f60;">游戏创角：<span id="game_role">0.00</span></div>
    </div>
    <div class="layui-inline mt5">
        <div class="my-data" style="background: #f60;">游戏活跃：<span id="game_active">0.00</span></div>
    </div>
    <div class="layui-inline mt5">
        <div class="my-data" style="background: #1E9FFF;">付费人数：<span id="pay_number">0.00</span></div>
    </div>
    <div class="layui-inline mt5">
        <div class="my-data" style="background: #1E9FFF;">付费金额：<span id="pay_money">0.00</span></div>
    </div>
    <div class="layui-inline mt5">
        <div class="my-data" style="background: #1E9FFF;">付费率：<span id="pay_rate">0.00</span></div>
    </div>
    <div class="layui-inline mt5">
        <div class="my-data" style="background: #888;">新增用户ARPU：<span id="arpu">0.00</span></div>
    </div>
    <div class="layui-inline mt5">
        <div class="my-data" style="background: #888;">活跃用户ARPU：<span id="arppu">0.00</span></div>
    </div>
    <div class="layui-inline mt5">
        <div class="my-data" style="background: #888;">付费用户ARPU：<span id="arpppu">0.00</span></div>
    </div>
    <div class="layui-inline mt5">
        <div class="my-data" style="background:#5FB878;">平台新增：<span id="plat_add">0.00</span></div>
    </div>
    <div class="layui-inline mt5">
        <button class="layui-btn my-btn toolBtn" id="export">导出</button>
    </div>
</div>

<table id="tableBox" lay-filter="tableBox"></table>

<script type="text/html" id="tableBar">
    <a class="layui-btn my-btn layui-btn-sm" lay-event="chart"><i class="layui-icon">&#xe62c;</i>走势图</a>
</script>
{/block}

{block name="css"}
<style>
.my-data {height: 38px; line-height:38px; padding: 0 10px; color: #fff;;}
.mt5 {margin-top: 5px;}
</style>
{/block}

{block name="js"}
<script>
    layui.use(['form', 'laydate', 'table'], function(){
        var table = layui.table
            ,$ = layui.$
            ,layer = layui.layer
            ,laydate = layui.laydate
            ,load = layer.load()
            ,active = {
                reload: function () {
                    var jsonObj = {
                        "plat": $('#plat').val()
                        ,"date": $('#date').hasClass('layui-disabled') ? $('#today').attr('value') : $('#date').val()
                        ,"channel_id": $('#channel_id').val()
                    };

                    table.reload('tableId', {
                        page: {curr: 1}
                        ,where: jsonObj
                        ,height: 'full-120'
                    })
                },
            };

        $('#today').click(function(){
            $(this).css({'borderColor':'#ddd'})
            $('#date').addClass('layui-disabled');
            $(this).removeClass('layui-disabled');
        });

        table.render({
            elem: '#tableBox'
            ,height: 'full-120'
            ,url: '{:url("DataChannel/index")}'
            ,where: {date:$('#today').attr('value'), plat:$('#plat').val()}
            ,page: true
            ,limit:400
            ,limits:[400,800,1000]
            ,loading:true
            ,id:'tableId'
            ,done: function (res, curr, count) {
                if(res.params != undefined){
                    $('#plat_add').html(res.params.plat_add);
                    $('#game_add').html(res.params.game_add);
                    $('#game_role').html(res.params.game_role);
                    $('#game_active').html(res.params.game_active);
                    $('#pay_number').html(res.params.pay_number);
                    $('#pay_money').html(res.params.pay_money);
                    $('#pay_rate').html(res.params.pay_rate);
                    $('#arpu').html(res.params.arpu);
                    $('#arppu').html(res.params.arppu);
                    $('#arpppu').html(res.params.arpppu);
                }else{
                    $('#plat_add').html(0);
                    $('#game_add').html(0);
                    $('#game_role').html(0);
                    $('#game_active').html(0);
                    $('#pay_number').html(0);
                    $('#pay_money').html(0);
                    $('#pay_rate').html(0);
                    $('#arpu').html(0);
                    $('#arppu').html(0);
                    $('#arpppu').html(0);
                }
                layer.close(load);
            }
            ,cols: [[
                {field:'daytime', title: '统计日期', width: 190}
                ,{field:'channel_id', title: '渠道ID', width: 90, sort:true}
                ,{field:'channel_name', title: '渠道名称', width: 140, sort:true}
                ,{field:'game_add', title: '游戏新增', width: 100, sort:true}
                ,{field:'game_role', title: '游戏创角', width: 100, sort:true}
                ,{field:'game_active', title: '游戏活跃', width: 100, sort:true}
                ,{field:'pay_number', title: '付费人数', width: 100, sort:true}
                ,{field:'pay_money', title: '付费金额', width: 100, sort:true}
                ,{field:'pay_rate', title: '付费率', width: 100, sort:true}
                ,{field:'arpu', title: '新增用户ARPU', width: 140, sort:true}
                ,{field:'arppu', title: '活跃用户ARPU', width: 140, sort:true}
                ,{field:'arpppu', title: '付费用户ARPU', width: 140, sort:true}
                ,{field:'plat_add', title: '平台新增', width: 100, sort:true}
                ,{title: '操作', align:'center', width: 130, toolbar:'#tableBar'}
            ]]
        });

        //日期
        laydate.render({
            elem: '#date'
            ,type: 'date'
            ,range: true
            ,calendar: true
            ,min: '2016-01-01'
            ,max: -1
            ,ready: function(date){
                $('#today').addClass('layui-disabled').css({'borderColor':'#ddd'});
                $('#date').removeClass('layui-disabled');
            }
        });

        $('#searchBox .searchBtn').on('click', function(){
            load = layer.load();
            active['reload'].call(this);
            return false;
        });

        $('#toolBox .toolBtn').on('click', function(){
            if($(this).attr('id') == 'export'){
                var jsonStr = ''
                    ,jsonObj = {
                        "plat": $('#plat').val()
                        ,"date": $('#date').hasClass('layui-disabled') ? $('#today').attr('value') : $('#date').val()
                        ,"channel_id": $('#channel_id').val()
                        ,"export": true
                    };
                layer.msg('导出中....', {icon: 1, time: 2000});
                for(k in jsonObj){
                    jsonStr += k + '=' + jsonObj[k] + '&';
                }
                window.location.href = '{:url("DataChannel/index")}?'+jsonStr.substring(0, jsonStr.length-1);
            }
        });

        table.on('tool(tableBox)', function(obj){
            var data = obj.data
            if(obj.event === 'chart'){
                var jsonStr = ''
                    ,jsonObj = {
                        "plat": $('#plat').val()
                        ,"daytime": $('#date').hasClass('layui-disabled') ? $('#today').attr('value') : $('#date').val()
                        ,"channel_id": data.channel_id
                        ,"channel_name": data.channel_name
                        ,"game_add": data.game_add
                        ,"game_role": data.game_role
                        ,"game_active": data.game_active
                        ,"pay_money": data.pay_money
                    };
                for(k in jsonObj){
                    jsonStr += k + '=' + jsonObj[k] + '&';
                }
                layer.open({
                    type: 2
                    ,title: '走势图'
                    ,resize: true
                    ,offset: '80px'
                    ,area: ['85%', '75%']
                    ,content: '{:url("DataChannel/chart")}?'+jsonStr.substring(0, jsonStr.length-1)
                });
            }
        });
    });
</script>
{/block}